<!doctype html>
<!--suppress ALL-->
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>南瓜课堂- 传道 · 授业 · 解惑</title>
    <meta name="Keywords" content="关键词,关键词">
    <meta name="description" content="">
    <link rel="shortcut icon" type="image/x-icon" href="/static/image/ds/logo/pinSlogo.png"/>
    <link rel="stylesheet" href="/static/css/ds/main.css">
    <link rel="stylesheet" href="/static/css/ds/classify.css">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/js/laypage/skin/laypage.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <script src="/static/js/vue/vue.min.js"></script>
    <script src="/static/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/static/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/jquery-1.8.3.js"></script>
    <style>
        a {
            color: black;
        }

        a:hover {
            text-decoration: none;
        }
    </style>
</head>

<body style="background: #f9f9f9; ">

<!--E 头部样式-->
<div class="header">

    <div class="h_top">

        <!--S logo-->
        <div class="h_logo">
            <a href="javascript:void (0);"><img src="/static/image/ds/logo/1.png" alt="南瓜课堂" width="145" height="38"/></a>
            <!--S 所有列表 -->
        </div>

        <!--E logo-->

        <!--S 头部导航-->
        <div class="h_nav">
            <ul>
                <li>
                    <a href="/user/toIndex">首页</a>
                </li>
                <li>
                    <a href="/type/toType">全部课程</a>
                </li>
                <li>
                    <a href="#teacher">讲师团队</a>
                </li>
                <li>
                    <a href="#">讲师入驻</a>
                </li>
            </ul>
        </div>
        <!--E 头部导航-->

        <!--S 搜索框-->
        <div class="h_search">
            <input type="text" class="h_text"/>
            <a href="#" class="h_btn"></a>
        </div>
        <!--E 搜索框-->

        <!--S 消息   个人中心-->
        <div class="h_message">
            <div class="h_info">
                <a href="#" target="_blank"></a>
                <i></i>
            </div>
            <!--个人中心-->
            <div class="h_pic">
                <a class="h_log" href="#">登录/注册</a>

            </div>
        </div>
        <!--E 消息   个人中心-->
    </div>

</div>
<div class="kong"></div>
<!--E 头部样式-->

<div class="subject">
    <div class="subject_top">
        <div class="sub_md">
            <div class="sub_md1">类别:</div>
            <div class="sub_md2">
                <a href="javascript:void(0);" id="allFirstType">全部</a>
            </div>
            <br/>
            <div class="sub_md1">标签:</div>
            <div class="sub_md3">
                <a href="javascript:void(0);" id="allSecondType">全部</a>
            </div>
        </div>
    </div>

    <div class="subject_main">
        <div class="sub_zz">
            <div id="zonghe">综合排序:</div>
            <div id="subjectNature">
                <ul>
                    <li><input class="subjectSelect" type="radio" name="videoOrBroadcast" id="video"/><label
                            for="video"></label> 视频课程
                    </li>
                    <li><input class="subjectSelect" type="radio" name="videoOrBroadcast" id="broadcast"/><label
                            for="broadcast"></label> 直播课程
                    </li>
                    <li><input class="subjectSelect" type="radio" name="freeOrNofree" id="free"/><label
                            for="free"></label>
                        免费课程
                    </li>
                    <li><input class="subjectSelect" type="radio" name="freeOrNofree" id="nofree"/><label
                            for="nofree"></label> 精品课程
                    </li>
                </ul>
            </div>
            <div class="orderPrice">
                <p><a href="javascript:void(0);" class="orderName" th:text="按价格排序"></a></p>
                <p><a href="javascript:void(0);" class="orderName" th:text="价格从低到高"></a></p>
                <p><a href="javascript:void(0);" class="orderName" th:text="价格从高到低"></a></p>
            </div>
            <div class="orderSelect"><span>按价格排序</span>&emsp;<img src="/static/image/lyg/下拉图标.png"></div>
        </div>
        <div class="course_list" id="allCourse">
            <div class="c_course" v-for="(item,index) in result">
                <div class="c_con c_list">
                    <input class="hiddenId" type="hidden" v-if="item.courseId !== undefined" :value="item.courseId">
                    <input class="hiddenId" type="hidden" v-else :value="item.broadcastId">
                    <img :src="item.courseCover" v-if="item.courseName !== undefined" width="222" height="145"/>
                    <img :src="item.broadcastCover" v-else width="222" height="145"/>
                    <div class="c_yy"></div>
                    <div class="c_desc">
                        <p class="c_title" v-if="item.courseName !== undefined">{{item.courseName}}</p>
                        <p class="c_title" v-else>{{item.broadcastTitle}}</p>
                        <p>讲师：{{item.teacher.teacherName}}</p>
                        <a href="javascript:void (0)" v-if="item.broadcastTitle !== undefined" class="c_btn" @click="toBroadcastMsg(item.broadcastId)" >查看详情</a>
                        <a href="javascript:void (0)" v-else class="c_btn" @click="toCourseMsg(item.courseId)" >查看详情</a>
                    </div>
                    <a href="javascript:void (0)" v-if="item.broadcastTitle !== undefined" class="c_tit_main" @click="toBroadcastMsg(item.broadcastId)" >{{item.broadcastTitle}}</a>
                    <a href="javascript:void (0)" v-else class="c_tit_main" @click="toCourseMsg(item.courseId)" >{{item.courseName}}</a>
                </div>
            </div>

        </div>
        <div id="pagenav"></div>
    </div>


</div>

<!--footer start-->
<div class="footer">
    <div class="f_con">
        <div class="f_desc">
            <dl>
                <dt>关于南瓜</dt>
                <dd>
                    <a href="#">了解南瓜</a>
                </dd>
                <dd>
                    <a href="#">加入南瓜</a>
                </dd>
                <dd>
                    <a href="#">联系我们</a>
                </dd>
            </dl>

            <dl>
                <dt>学习资讯</dt>
                <dd>
                    <a href="#">学院课程</a>
                </dd>
                <dd>
                    <a href="#">就业指南</a>
                </dd>
            </dl>

            <dl>
                <dt>服务中心</dt>
                <dd>
                    <a href="#">安卓APP</a>
                </dd>
                <dd>
                    <a href="#">IOS APP</a>
                </dd>
            </dl>

            <dl>
                <dt>关注我们</dt>
                <dd>
                    <a href="#" class="share f_wb"></a>
                    <a href="#" class="share f_qq"></a>
                </dd>
            </dl>

        </div>

        <div class="f_tel">
            <div class="f_qrcode">
                <img src="../static/image/ds/weixin.png" alt="南瓜官方微信" width="102" height="127"/>
            </div>
            <div class="f_time">
                <p class="f_phone">400-009-6359</p>
                <p class="f_price">
                    <span>周一至周六 9:30-23:00</span>
                    <span>（仅收市话费）</span>
                </p>
                <p class="f_mm">24小时在线客服</p>
            </div>
        </div>
        <div class="clear"></div>
    </div>

</div>
<!--end footer-->

<!--copyright start-->
<div class="copyright">
    Copyright &copy; 2013-2014 www.mooncollege.cn All Rights Reserved 版权所有：南瓜课堂教育咨询有限公司 备案号：备13016338号
</div>
<!--end copyright-->

<script>


    //初始化页面
    init();

    var app = new Vue({
        el: "#allCourse",
        data: {
            result: []
        }
    });

    var typeId;         //一级标题ID
    var subjectId;      //二级标题ID
    var pageNum;        //当前页
    var pageSize;       //每页大小
    var courseNature;   //课程性质：直播或者视频
    var isfree;         //是否免费
    var flag;   //排序方式


    /* ********************初始化页面的函数，加载一级标题******************** */
        function init(){
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/type/getType",
                success: function (types) {
                    $.each(types, function (index, obj) {
                        $(".sub_md2").append("<a href='javascript:void(0);' class='firstType' id='" + obj.typeId + "' >" + obj.typeName + "</a>");
                    });

                    //初始化页面调用getSubject(),显示所有二级标题
                    getSubject();
                    //判断页面的入口，是从“全部课程”进入，还是从一级或二级标题进入
                    var a = [[${typeId}]];
                    var b = [[${subjectId}]];
                    if (a == 0 && b == 0) {
                        //初始化页面调用getAllCourseList(),显示所有课程
                        getAllCourseList(typeId, subjectId, isfree, pageNum, flag, courseNature);
                    }else{
                        getAllCourseList(a, b, isfree, pageNum, flag, courseNature);
                    }


                    //点击一级标题调用getSubject()；给typeId赋值
                    $(".firstType").click(function () {
                        getSubject(this.id);
                        typeId = this.id;
                        subjectId = undefined;
                        getAllCourseList(typeId, subjectId, isfree, pageNum, flag, courseNature);
                    });

                    //点击一级标题的全部时调用getSubject()
                    $("#allFirstType").click(function () {
                        getSubject();
                        typeId=undefined;
                        subjectId = undefined;
                        getAllCourseList(typeId, subjectId, isfree, pageNum, flag, courseNature);
                    });


                    //点击排序方式事件,给flag赋值
                    $(".orderName").click(function () {
                        var $orderName = this.text;
                        $(".orderSelect span").html($orderName);
                        if ($orderName == "价格从低到高") {
                            flag = 1;
                        } else if ($orderName == "价格从高到低") {
                            flag = 2;
                        } else {
                            flag = 0;
                        }
                        getAllCourseList(typeId, subjectId, isfree, pageNum, flag, courseNature);

                    });

                    //选择视频或者直播的单选按钮两次点击的选中或取消
                    $(":radio[name='videoOrBroadcast']").click(function () {
                        var r = $(this).attr("name");
                        $(":radio[name=" + r + "]:not(:checked)").attr("tag", 0);
                        if ($(this).attr("tag") == 1) {
                            $(this).prop('checked', false);
                            $(this).attr("tag", 0);
                            courseNature = undefined;
                            getAllCourseList(typeId, subjectId, isfree, pageNum, flag, courseNature);
                        } else {
                            $(this).attr("tag", 1);
                            courseNature = $(this).attr("id");
                            getAllCourseList(typeId, subjectId, isfree, pageNum, flag, courseNature);
                        }
                    });

                    //选择免费或者收费的单选按钮两次点击的选中或取消
                    $(":radio[name='freeOrNofree']").click(function () {
                        var r = $(this).attr("name");
                        $(":radio[name=" + r + "]:not(:checked)").attr("tag", 0);
                        if ($(this).attr("tag") == 1) {
                            $(this).prop('checked', false);
                            $(this).attr("tag", 0);
                            isfree = undefined;
                            getAllCourseList(typeId, subjectId, isfree, pageNum, flag, courseNature);
                        } else {
                            $(this).attr("tag", 1);

                            var $isfree = $(this).attr("id");
                            if ($isfree == "free") {
                                isfree = 1;
                            } else if ($isfree == "nofree") {
                                isfree = 0;
                            }
                            getAllCourseList(typeId, subjectId, isfree, pageNum, flag, courseNature);
                        }
                    });

                }
            });
        }




        //根据一级分类查询二级分类的函数
        var getSubject = function (curr) {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/subject/getSubjectByTypeId",
                data: {
                    typeId: curr
                },
                success: function (subjects) {
                    $(".secondType").remove();
                    console.log(subjects);
                    $.each(subjects, function (index, obj) {
                        $(".sub_md3").append("<a class='secondType' href='javascript:void(0)' id='" + obj.subjectId + "'>" + obj.subjectName + "</a>");
                    });

                    //点击二级标题给subjectId赋值
                    $(".secondType").click(function () {
                        subjectId = this.id;
                        getAllCourseList(typeId, subjectId, isfree, pageNum, flag, courseNature);
                    });


                }
            })
        }
    var cull1=0;
    window.onbeforeunload = function() {
            toComment(4);
    };


    //获得所有视频课程，需要参数：一级分类ID,二级分类ID，当前页，每页数据大小，是否免费
        var getAllCourseList = function (typeId, subjectId, isfree, curr, flag, courseNature) {
            var courseState = isfree;
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "/course/getCourseToIndex2",
                data: {
                    pageNum: curr || 1,
                    pageSize: 20,
                    typeId: typeId,
                    subjectId: subjectId,
                    state: isfree,
                    courseNature: courseNature,
                    flag: flag
                }, success: function (msg) {
                    console.log(msg.returnList)
                    app.result = msg.returnList;
                    laypage({
                        cont: 'pagenav',
                        skin: '#4169E1',
                        pages: msg.pageTotal,
                        first: "首页",
                        last: "尾页",
                        curr: curr || 1,
                        jump: function (obj, first) {
                            if (!first) {
                                getAllCourseList(typeId, subjectId, isfree, obj.curr, flag, courseNature);
                            }
                        }
                    });
                }
            });
        }


        //选择排序方式
        //鼠标滑过显示三种排序的Div
        $(".orderSelect").mouseover(function () {
            $(".orderPrice").show();
        });
        //鼠标滑出隐藏三种排序的Div
        $(".orderPrice").mouseleave(function () {
            $(".orderPrice").hide();
        });

    //点击“查看详情”或者标题跳转到视频课程的详情页
    function toCourseMsg(courseId) {
        window.open("/course/toCourseMsg?courseId="+courseId,"_blank");
    }
    //点击“查看详情”或者标题跳转到直播课程的详情页
    function toBroadcastMsg(broadcastId) {
        window.open("/broadcast/toBroadcastMsg?broadcastId="+broadcastId,"_blank");
    }
</script>

</body>

</html>